<template>
  <div id="page-wrapper" class="gray-bg">
    <header-link/>
    <div class="row wrapper border-bottom white-bg page-heading">
      <div class="col-sm-4">
        <h2>主页</h2>
        <ol class="breadcrumb">
          <li class="active">
            <router-link :to="{ name: 'home' }">
              <strong>主页</strong>
            </router-link>
          </li>
        </ol>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <router-link v-if="loginFlag" :to="{ name: 'productList' }">
          <div class="col-md-3 col-sm-6">
              <div class="ibox">
                  <div class="ibox-content">
                      <h2 class="text-navy text-center">
                        文件管理
                      </h2>
                  </div>
              </div>
          </div>
        </router-link>
        <router-link v-if="!loginFlag" :to="{ name: 'courseDescription' }">
          <div class="col-md-3 col-sm-6">
              <div class="ibox">
                  <div class="ibox-content">
                      <h2 class="text-navy text-center">
                        课程描述
                      </h2>
                  </div>
              </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>

</template>

<script>
import header from '@/components/Header.vue'
import common from '@/server/common.js'
export default {
  name: 'home',
  data () {
    return {
      loginFlag: false
    }
  },
  components: {
    'header-link': header
  },
  created () {
  },
  mounted () {
    var vue = this;
    common.checkLogin(function (loginFlag) {
      vue.loginFlag = loginFlag;
    })
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#page-wrapper {
  margin: 0;
}
.container {
  margin-top: 20px;
}
.ibox-content {
  padding: 15px 20px 15px 20px;
  border-top: 3px solid #e7eaec;
}
</style>
